articles

Home / DeveloperSection / Articles / Endless List view Adapter in Android

Endless List view Adapter in Android

Anonymous User14067 05-Feb-2015

In my last post,we learn about intents and how to start an activity from an activity : Start a new activity within an Activity in Android. Now here,  we implement an endless list view

An endless adapter is an adapter that loads more data when user reaches the List View end. This kind of adapter is useful when there is a large number of items and we don’t want to show them all to avoid a long loading time. 

We pretty much all know the nice technique apps like GMail / Facebook use to dynamically load more items to the ListView then you scroll to the bottom. In this post i want to shed some light on how to make such a list ourselves! 

We can approach this from a few sides:

  •    The first option is to add a button to the footer of the view. When pressed it will load more content.
  •    The second option is to check if the last item is visible and load more content when it is! 

Second way is my favorite. We will follow the second approach here to implement our endless list

Pre-Requisites:

1.       Ellipse SDK

2.       Android SDK

3.       ADT plugin

Or Android Studio and a compatible version of JAVA SDK .Install and configure the

above utilities.

Now create a new Android project namely “Endless List”.

Implementation objective:

To show the list of items in list view. When the user scrolled the list and reach the end of the screen then more items will be loaded and added to the list and a progress bar will be shown while the items are loading

Creating GUIs

Now, we need to add views in our view groups, i.e. add widgets to our GUI.

 We need

1.       A Relative /Linear Layout (main GUI) consists of list view which will show our list items.

2.      One more UI for footer of the list view. It consists of  a text view  and a progress bar

For this, navigate to res/Layout/activity_main.xml from package explorer in Eclipse. Open activity_main.xml

Add following code into it:

 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".MainActivity"
    android:gravity="center">
 
    <ListView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/listview"
        ></ListView>
 
</RelativeLayout>

 Creating Footer view:

Footer view will be appended to the list view at the end of the list to show the progress while the next items are loading in the list.

Now, navigate to res/Layout/loading view.xml from package explorer in Eclipse.

Open loading _view.xml

Add following code into it:

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:gravity="center"> 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Loading"
        android:textAppearance="?android:attr/textAppearanceMedium" />
    <ProgressBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp"
        android:layout_gravity="bottom" /> 
</LinearLayout> 

 

Main Activity Implementation: 

·    The key of this pattern is OnScrollListener which will listen to user when the user scroll on the list. All the magic is done inside its OnScroll() method.

·    The actual loading is done in a separate thread (Runnable). This way we don't lock the main interface (GUI).

·    The loading is done by 2 Runnables. The 1st runnable ( loadMoreListItems ) is called to get the data and the 2nd runnable ( returnRes ) is called on the main (UI) thread to update the interface.

·    To switch from the 1st to the 2nd we use a method named: runOnUiThread 

Navigate to MainActivity in src folder from package explorer. Open MainActivity and this code in it:

package com.example.msclient010.endlesslist; 
import android.content.Context;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.AbsListView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import java.util.ArrayList;
 
public class MainActivity extends ActionBarActivity { 
    //arrayList to hold list view items
    ArrayList<String> myListItems;
    // list view which will show our list items
    ListView listView;
    //it will tell us weather to load more items or not
    boolean loadingMore = false;
    //array adpter to set list items
    ArrayAdapter adapter; 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main); 
        //getting reference of list view
        listView = (ListView) findViewById(R.id.listview);
        myListItems = new ArrayList<String>();
 
        //add the footer before adding the adapter, else the footer will not load!
        View footerView = ((LayoutInflater) this.getSystemService(Context.LAYOUT_INFLATER_SERVICE)).inflate(R.layout.loading_view, null, false);         this.listView.addFooterView(footerView); 
        //create and adapter
        adapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1, myListItems);
        //setting adapter to list view
        listView.setAdapter(adapter);
        //setting listener on scroll event of the list
        listView.setOnScrollListener(new AbsListView.OnScrollListener() {
            @Override
            public void onScrollStateChanged(AbsListView view, int scrollState) {
            }
            @Override
            public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
                //what is the bottom item that is visible
                int lastInScreen = firstVisibleItem + visibleItemCount;                 //is the bottom item visible & not loading more already? Load more!
                if ((lastInScreen == totalItemCount) && !(loadingMore)) { 
                    //start a new thread for loading the items in the list
                    Thread thread = new Thread(null, loadMoreListItems);
                    thread.start();
                }
            }
        }); 
    } 
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
    private Runnable loadMoreListItems = new Runnable() {
        @Override
        public void run() {
            //Set flag so we cant load new items 2 at the same time
            loadingMore = true;
            //Reset the array that holds the new items
            myListItems = new ArrayList<String>();
            //Simulate a delay, delete this on a production environment!
            try {
                Thread.sleep(1000);
            } catch (InterruptedException e) {
            }
            //Get 10 new list items
            for (int i = 0; i < 10; i++) {
                //Fill the item with some bogus information
                myListItems.add("item" + i);
            }
            //Done! now continue on the UI thread
            runOnUiThread(returnRes);
        }
    };
    private Runnable returnRes = new Runnable() {
        @Override
        public void run() {
            //Loop through the new items and add them to the adapter
            if (myListItems != null && myListItems.size() > 0) {
                for (int i = 0; i < myListItems.size(); i++)
                    adapter.add(myListItems.get(i));
            }
            //Update the Application title
            setTitle("Never ending List with " + String.valueOf(adapter.getCount()) + " items");             //Tell to the adapter that changes have been made, this will cause the list to refresh             adapter.notifyDataSetChanged();             //Done loading more.           loadingMore = false;
        }
    };
}

  

 Running the application:

Just hit on “Run” button and our app will be launched and the list view will be displayed:

Endless List view Adapter in Android

 

 Ten items will be displayed on the screen. As you scroll your list to see more items, a progress bar will appear while the next ten items will be added in the list view

Also notice the title which will indicate the current number of items in the list.

Endless List view Adapter in Android

 

Next,we will see how to use fragments in  our app : Fragment Implementation in Android

Thanks for reading this post.

Happy Coding!!J

 


Updated 07-Sep-2019
I am a content writter !

Leave Comment

Comments

Liked By